<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>loading...</title>
        <style>
            body {
                background-color: #ecf0f1;
            }
            
            .loading {
                width: 96px;
                height: 96px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -48px;
                margin-top: -48px;
                background: transparent;
            }
            
            .ring {
                position: relative;
                display: inline-block;
                height: 96px;
                width: 96px;
                border-radius: 50%;
                background-color: #fff;
                overflow: hidden;
            }
            
            .ring:after {
                content: "";
                position: absolute;
                top: 20px;
                left: 20px;
                display: block;
                height: 56px;
                width: 56px;
                background: none repeat scroll 0 0 #2980b9;
                border-radius: 50%;
            }
            
            .ring .animation {
                position: absolute;
                left: 100%;
                top: 0;
                height: 100%;
                width: 100%;
                border-radius: 999px;
                background: none repeat scroll 0 0 #94c7e7;
                -webkit-animation: ui-spinner-rotate-left 2s infinite;
                animation: ui-spinner-rotate-left 2s infinite;
                -webkit-transform-origin: 0 50% 0;
                transform-origin: 0 50% 0;
            }
            
            .ring > span {
                position: absolute;
                height: 100%;
                width: 50%;
                overflow: hidden;
            }
            
            .ring > span.left {
                left: 0;
            }
            
            .ring > span.left .animation {
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
            }
            
            .ring > span.right {
                left: 50%;
            }
            
            .ring > span.right .animation {
                border-bottom-right-radius: 0;
                border-top-right-radius: 0;
                left: -100%;
                -webkit-transform-origin: 100% 50% 0;
                transform-origin: 100% 50% 0;
            }
            
            @keyframes ui-spinner-rotate-right {
                0% {
                    transform: rotate(0deg);
                }
                
                100% {
                    transform: rotate(360deg);
                }
            }
            
            @keyframes ui-spinner-rotate-left {
                0% {
                    transform: rotate(0deg);
                }
                
                100% {
                    transform: rotate(360deg);
                }
            }
            
            @-webkit-keyframes ui-spinner-rotate-right {
                0% {
                    -webkit-transform: rotate(0deg);
                }
                
                100% {
                    -webkit-transform: rotate(360deg);
                }
            }
            
            @-webkit-keyframes ui-spinner-rotate-left {
                0% {
                    -webkit-transform: rotate(0deg);
                }
                
                100% {
                    -webkit-transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="loading">
            <span class="ring">
                <span class="left"><span class="animation"></span></span>
                <span class="right"><span class="animation"></span></span>
            </span>
        </div>
    </body>
</html>